// 该文件用于创建整个应用de路由器
import VueRouter from 'vue-router'

// 引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Datle from '../pages/Datle.vue'

// 创建一个路由
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            // 二级路由，注意路径不需要加/
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            // 给路由命名
                            name:'xiangqing',
                            path:'datle',
                            // path:'datle/:id/:title'  这是pargams携带参数的写法，在路径里面占个位
                            component:Datle,

                            // 路由的props配置
                            // 第一种写法：props的值为对象，该对象中所有的key-value值都会通过props的形式传递给该组件
                            // props:{a:666,b:'你好'}

                            // 第二种：props的值为true，就会把该路由通过pragams带过来的参数全部以props的形式传递给该组件
                            // props:true,

                            // 第三种：props函数写法,接收query传过来的参数
                            // props($route){
                            //     return{
                            //         id:$route.query.id,
                            //         title:$route.query.title
                            //     }
                            // }
                        }
                    ]
                }
            ]
        }
    ]
})

// 暴露
export default router